<template>
  <div
    v-for="item in lists"
    @click="detail(item)"
    class="w-full bg-white rounded-[10px] px-[15px] py-[10px] text-[12px] relative mb-[10px]"
  >
    <div class="text-[18px] font-bold">{{ item.product_name }}</div>

    <div class="mt-[14px]">
      <div class="text-[13px]">投保人:{{ item.insure_name }}</div>
      <div class="text-[13px] mt-[10px]">生效日期:{{ item.start_time }}</div>
      <div class="text-[13px] mt-[10px]">结束日期:{{ item.end_time }}</div>
    </div>
    <div
      class="mt-[18px] flex justify-end"
      v-if="route.query.type != '2' && route.query.type != '4'"
    >
      <div
        @click.stop="del(item.id)"
        class="w-[82px] h-[32px] rounded-[5px] border-[0.5px] border-[#9A9A9A] text-[14px] text-[#797979] flex justify-center items-center mr-[10px]"
      >
        删除
      </div>
      <div
        v-if="route.query.type != '2' && route.query.type != '4'"
        class="w-[82px] h-[32px] rounded-[5px] bg-[#F38E40] text-[14px] text-white flex justify-center items-center"
      >
        去支付
      </div>
    </div>
    <div v-else class="flex justify-end">
      <div
        v-if="
          item.bx_id >= 19 &&
          item.bx_id <= 24 &&
          item.pay_method > 1 &&
          item.bd_no &&
          route.query.type != '4'
        "
        @click.stop="cheD(item.id)"
        class="w-[82px] h-[32px] rounded-[5px] border-[0.5px] border-[#9A9A9A] text-[14px] text-[#797979] flex justify-center items-center mr-[10px]"
      >
        撤单
      </div>
      <div
        v-if="route.query.type != '4'"
        class="w-[82px] h-[32px] rounded-[5px] border-[0.5px] border-[#EF6800] text-[14px] text-[#EF6800] flex justify-center items-center mr-[10px]"
      >
        查看详情
      </div>
    </div>
    <!-- <div
      class="mt-[20px] w-full px-[20px] flex items-center justify-between h-[80px]"
      style="background: rgba(239, 104, 0, 0.05)"
    >
      <div class="flex flex-col items-center justify-center">
        <div class="text-[#8B8B8B]">生效日期</div>
        <div class="mt-[10px] font-bold">{{ item.start_time }}</div>
      </div>
      <div class="flex flex-col items-center justify-center">
        <div class="text-[#8B8B8B]">结束日期</div>
        <div class="mt-[10px] font-bold">{{ item.end_time }}</div>
      </div>
    </div> -->
    <!-- <div
      class="mt-[20px] text-[14px] font-bold text-[#EF6800] w-full text-center"
    >
      {{ route.query.type == "1" ? "去支付" : "查看详情" }}
    </div> -->
    <div class="absolute top-0 right-0">
      <div
        class="w-[64px] h-[26px] flex justify-center items-center bg-[#F38E40] text-white"
        style="border-radius: 0px 10px 0px 10px"
      >
        {{ item.tag }}
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { defineProps, watchEffect, ref, defineEmits } from "vue";
import { showConfirmDialog, showToast } from "vant";
import { orderDel ,cancelDadi} from "@/utils/api";
const props = defineProps({
  Info: { type: Object },
  list: { type: Array<any> },
});
const emit = defineEmits(["del"]);
const router = useRouter();
const route = useRoute();

const lists = ref([] as any[]);
const order_id = ref("");
const id = ref("");
const detail = (item: any) => {
  order_id.value = item.id;
  id.value = item.bx_id;
  //去支付
  if (route.query.type == "1") {
    //紫金短期意外
    if (id.value == "3") {
      router.push(
        `/h5/insure/zj_dqyw?id=${id.value}&order_id=${order_id.value}&type=${route.query.type}`
      );
    } else if (id.value == "1") {
      //紫金实习生意外险
      router.push(
        `/h5/insure/zj_sxs?id=${id.value}&order_id=${order_id.value}&type=${route.query.type}`
      );
    } else if (id.value == "7") {
      //枣庄建工一切
      router.push(
        `/h5/insure/zz_jgyq?id=${id.value}&order_id=${order_id.value}&type=${route.query.type}`
      );
    } else if (id.value == "8") {
      router.push(
        `/h5/insure/zz_gz?id=${id.value}&order_id=${order_id.value}&type=${route.query.type}`
      );
    } else if (id.value == "19") {
      //大地建工一切险
      router.push(
        `/h5/insure/dd_jgyq?id=${id.value}&order_id=${order_id.value}&type=${route.query.type}`
      );
    } else if (id.value == "20") {
      // 大地财产一切险
      router.push(
        `/h5/insure/dd_ccyqx?id=${id.value}&order_id=${order_id.value}&type=${route.query.type}`
      );
    }else if (id.value == "21") {
      // 大地财产一切险
      router.push(
        `/h5/insure/dd_ccyqx?id=${id.value}&order_id=${order_id.value}&type=${route.query.type}`
      );
    }else if (id.value == "22") {
      // 大地公众责任险
      router.push(
        `/h5/insure/dd_gz?id=${id.value}&order_id=${order_id.value}&type=${route.query.type}`
      );
    } else if (id.value == "23") {
      // 大地公众责任险
      router.push(
        `/h5/insure/dd_gz?id=${id.value}&order_id=${order_id.value}&type=${route.query.type}`
      );
    } else if (id.value == "24") {
      // 大地公众责任险
      router.push(
        `/h5/insure/dd_jggzx?id=${id.value}&order_id=${order_id.value}&type=${route.query.type}`
      );
    }   else {
      router.push(
        `/h5/insure/?id=${id.value}&order_id=${order_id.value}&type=${route.query.type}`
      );
    }
  } else if (route.query.type == "2") {
    // console.log(item);

    //查看订单详情
    router.push(`/h5/bd/bdDetail?id=${id.value}&order_no=${item.order_no}`);
  }
};
const del = (id: number) => {
  showConfirmDialog({
    title: "删除",
    message: "确认删除吗？",
    width: 320,
  })
    .then(async () => {
      // on confirm
      const res = await orderDel({ id: id });
      emit("del");
      showToast(res.msg);
    })
    .catch(() => {
      // on cancel
      showToast("取消删除");
    });
};
//撤单
const cheD = (id: number) => {
  showConfirmDialog({
    title: "撤单",
    message: "确认撤单吗？",
    width: 320,
  })
    .then(async () => {
      // on confirm
      const res = await cancelDadi({ id: id });
      emit("del");
      showToast(res.msg);
    })
    .catch(() => {
      // on cancel
      showToast("取消撤单");
    });

}
watchEffect(() => {
  if (props.list) {
    lists.value = props.list;
    // console.log(lists.value);
  }
});
</script>
<style scoped lang="scss"></style>
